<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				// 创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					// 创建广州节点<li>广州</li>
					// 创建li元素节点
					// document.createElement()
					// 可以用于创建一个元素节点对象,它需要一个标签名作为参数,
					// 将会根据该标签命创建元素节点对象,并将创建好的对象作为标签名返回
					var li = document.createElement("li");
					
					// 创建广州文本节点
					// document.createTextNode()
					// 可以用来创建一个文本节点对象,需要一个文本内容作为参数,
					// 将会根据该内容创建文本节点,并将新的节点返回
					var gzText = document.createTextNode("广州");
					
					// 将gzText设置li的子节点
					// appendChild()
					// 向一个父节点中添加一个新的子节点
					// 用法: 父节点.appendChild(子节点);
					li.appendChild(gzText);
					
					// 获取id为city的节点
					var city = document.getElementById("city");
					
					// 将广州添加到city下
					city.appendChild(li);				
				});
				
				// 将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					// 创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					// 获取id为bj的节点
					var bj = document.getElementById("bj");
					
					// 获取city
					var city = document.getElementById("city");
					
					// insertBefore()
					// 可以在指定的子节点前插入新的子节点
					// 语法:
					// 	父节点.insertBefore(新节点,旧节点);
					city.insertBefore(li,bj);
				});		
					
				// 使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					// 创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					// 获取id为bj的节点
					var bj = document.getElementById("bj");
					
					// 获取city
					var city = document.getElementById("city");
					
					// replaceChild()
					// 可以使用指定的子节点替换已有的子节点
					// 语法: 父节点.replaceChild(新节点,旧节点);
					city.replaceChild(li,bj);
				})
				
				// 删除#bj节点
				myClick("btn04",function(){
					// 获取id为bj的节点
					var bj = document.getElementById("bj");
					// 获取city
					var city = document.getElementById("city");
					
					// removeChild()
					// 可以删除一个子节点
					// 语法: 父节点.removeChild(子节点);
					// city.removeChild(bj);
					
					// 子节点.parentNode.removeChild(子节点);
					bj.parentNode.removeChild(bj);
				})
				
				// 读取#city内的HTML代码
				myClick("btn05",function(){
					// 获取city
					var city = document.getElementById("city");
					alert(city.innerHTML);
				});
				
				// 设置#bj内的HTML代码
				myClick("btn06",function(){
					// 获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					// 向city中添加广州
					var city = document.getElementById("city");
					
					// 使用innerHTML也可以完成DOM的增删改的相关操作
					// 一般我们会两种方式结合使用
					// city.innerHTML += "<li>广州</li>";
					
					// 创建一个li
					var li = document.createElement("li");
					// 向li中设置文本
					li.innerHTML = "广州"；
					// 将li添加到city中
					city.appendChild(li);
				});
			};			
			
			function myClick(idStr,fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>
